<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>发布竞价车辆</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/all.css" />
	<style>
 		.layui-form-select dl{
 			z-index: 9999;
 		}
 	</style>
</head>
<body class="edit-car-infor">
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
		  <script src="assets/js/html5.min.js"></script>
		  <script src="assets/js/respond.min.js"></script>
		<![endif]-->
	<span class="layui-breadcrumb">
		<a>送修系统</a>
		<a><cite>发布竞价车辆</cite></a>
	</span>
	<div class="layui-container">
		<div class="layui-text">
			<h2 class="layui-field-title" style="text-align: center;">请详细填写以下内容</h2>
			<p class="warm-tip">注：带*为必填项</p>
		</div>
		<form class="layui-form" action="" onsubmit="return false;">
			<div class="layui-form-item carInforWrap">
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>报案号</label>
					<div class="layui-input-inline">
						<input type="text" name="number" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>品牌型号</label>
					<div class="layui-input-inline">
						<input type="text" name="brandtype" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>车辆类型</label>
					<div class="layui-input-inline">
						<select name="cartype" lay-verify="required">
					        <option value="">请选择</option>
					        <option value="1">轿车</option>
					        <option value="2">货车</option>
					        <option value="3">特种车</option>
				        </select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>车牌</label>
					<div class="layui-input-inline">
						<input type="text" name="carnum" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>制动方式</label>
					<div class="layui-input-inline">
						<input type="text" name="starttype" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>事故类型</label>
					<div class="layui-input-inline">
						<select name="shigu" lay-verify="required">
					        <option value="">请选择</option>
					        <option value="1">事故车</option>
					        <option value="2">水淹车</option>
					        <option value="3">火烧车</option>
				        </select>
					</div>
				</div>		
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>车架号（vin码）</label>
					<div class="layui-input-inline">
						<input type="text" name="vinnum" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>发动机号</label>
					<div class="layui-input-inline">
						<input type="text" name="enginenum" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label"><span class="musthave">*</span>出险日期</label>
					<div class="layui-input-inline">
						<input type="text" name="date1" id="date1" lay-verify="required" placeholder="年-月-日 时:分:秒" autocomplete="off" class="layui-input layui-date">
					</div>
				</div>	
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>车架号是否损坏</label>
					<div class="layui-input-inline">
						<select name="sunhuai" lay-verify="required">
					        <option value="">请选择</option>
					        <option value="1">是</option>
					        <option value="2">否</option>
				        </select>
					</div>
				</div>	
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>联系人 </label>
					<div class="layui-input-inline">
						<input type="text" name="contacter" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label layui-elip"><span class="musthave">*</span>联系电话</label>
					<div class="layui-input-inline">
						<input type="text" name="conphone" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>									
				<div class="car-location">
					<div class="layui-form-item">
						<label class="layui-form-label"><span class="musthave">*</span>车辆停放地</label>
						<div class="layui-input-inline">
							<select name="provid" id="provid" lay-filter="provid">
								<option value="">请选择省</option>
							</select>
						</div>
						<div class="layui-input-inline">
							<select name="cityid" id="cityid" lay-filter="cityid">
								<option value="">请选择市</option>
							</select>
						</div>
						<div class="layui-input-inline">
							<select name="areaid" id="areaid" lay-filter="areaid">
								<option value="">请选择县/区</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label"></label>
							<div class="layui-input-inline">
								<input id="detail-location" style="width:590px" type="text" name="detailid" placeholder="详细地址" autocomplete="off" class="layui-input" value="">
								<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
				    <label class="layui-form-label"><span class="musthave">*</span>损坏清单</label>
				    <div class="layui-input-inline">
				      	<script id="listContainer" name="list" type="text/plain" style="width:600px;height: 300px;">请输入内容</script>
				    </div>
				</div>
				<div class="car-img">
					<div class="layui-upload imgupload layui-clear">
						<button type="button" class="layui-btn" id="edit-up-btn"></button>
						<blockquote class="layui-elem-quote layui-quote-nm layui-clear" style="border:none">图片上传:(<span style="color: red;">点击图片可将其删除,文件类型jpg、png、bmp、jpeg,大小不超过2M</span>)
							<div class="layui-upload-list" id="pics-wrap">
								 <span class="add-bg">+</span>
							</div>
						</blockquote>
					</div>
				</div>
			</div>
			<div style="text-align: center;margin:20px auto;">
				<button class="layui-btn save-btn">保  存</button>
				<button class="layui-btn" lay-submit lay-filter="car-submit-btn" onclick="tan()">提  交</button>
			</div>
		</form>
	</div>
	
	<!-- 富文本编辑器配置文件 -->
    <script type="text/javascript" src="assets/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="assets/ueditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('listContainer');
    </script>
    
	<script src="assets/layui/layui.js"></script>
	<script src="assets/js/jquery-2.1.0.js"></script>

	<!--省市地区选择-->
	<script type="text/javascript" src="assets/js/data.js"></script>
	<script type="text/javascript" src="assets/js/province.js"></script>
	<script type="text/javascript">
		var defaults = {
			s1: 'provid',
			s2: 'cityid',
			s3: 'areaid',
			v1: null,
			v2: null,
			v3: null
		};
	</script>
	<!--//省市地区选择-->
	<script type="text/javascript" src="assets/js/all.js"></script>
	<script>
		layui.use(["form","element",'layer','upload'],function(){
			var form = layui.form,
				layer = layui.layer,
				upload = layui.upload,
				$ = layui.$
				//编辑发布汽车拍卖信息的页面js
				layer.photos({
			        photos: '#pics-wrap'
			    });
	
				//多图上传
				upload.render({
					elem: '#edit-up-btn',
					url: '/upload/',
					multiple: true,
					size: 1024 * 2,
					number: 0,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('.edit-car-infor #pics-wrap').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">');
							
						});
					},
					done: function(res) {
						//上传完毕
						if(res.result == 0) {
							layer.msg(res.message);
							
							//点击删除图片
							$(".edit-car-infor").delegate(".imgupload blockquote img", "click", function() {
								
								//alert(file.name);
								var theImg = $(this);
								layer.confirm("确定删除此张图片吗？", function(index) {
									$.ajax({
										type:"post",
										url:"upload?name="+ file.name,
										success:function(){
											theImg.remove();
										}										
									});									
									layer.close(index);
								})
							})
						} else {
							layer.msg("文件:" + res.filename + "---" + res.message);
						}
					},error:function(index,upload){
				    	layer.msg("服务器返回错误！");
				    	layer.closeAll('loading');
				    	
				    }
				});
				//点击删除图片
//				$(".edit-car-infor").delegate(".imgupload blockquote img", "click", function() {
//					var theImg = $(this);
//					alert(file.name);
//					layer.confirm("确定删除此张图片吗？", function(index) {
////						$.ajax({
////							type:"post",
////							url:"upload?name"+ file.name,
////							
////						});
//						theImg.remove();
//						layer.close(index);
//					})
//				})
			
			//监听提交
			form.on('submit(car-submit-btn)', function(data) {
//				layer.alert(JSON.stringify(data.field), {
//	                time:5000,
//	                title: "最终的提交信息"
//	            });
				console.log(data.field);
//				$.ajax({
//					type:"post",
//					url:"",
//					data:data.field,
//					dataType:"json",
//					success:function(){
//						layer.alert(JSON.stringify(data.result),{
//	                        time:5000,
//	                        title:"成功"
//	                   })
//					},
//					error: function(jqXHP,textStatus,errorThrown){
//	                    layer.alert(jqXHP.responseText);
//	                }
//				});
				return false;
			});

			
	})

	</script>
</body>
</html>
